<template>
  <div>
    <el-menu
      :default-active="$route.name"
      router
      ref="menu"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      unique-opened
    >
      <template v-for="item in list">
        <template v-if="item.child && item.child.length > 0">
          <el-submenu
            :index="item.self.index"
            :key="item.id"
            @click="gotoPath(item)"
          >
            <template slot="title" >
              <!-- <i :class="item.self.icon"></i> -->
              <iconpark-icon :name="item.self.icon"></iconpark-icon>
              <span>&nbsp;&nbsp;{{ item.self.title }}</span>
            </template>
            <LeftMenu :list="item.child" />
          </el-submenu>
        </template>
        <template v-if="item.child.length == 0"
        >
              <el-menu-item
              :key="item.id"
              :index="item.self.index"
              @click="gotoPath(item)"
              :class="$route.fullPath.includes(item.self.to) ? 'checked':''"
            >
              <iconpark-icon :name="item.self.icon"></iconpark-icon>
              <span slot="title" >&nbsp;&nbsp;{{ item.self.title }}</span>
            </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { nextTick } from 'vue';
export default {
  name: "LeftMenu",
  data() {
    return {
      isCollapse: true,
      route:'',
      defaultOpeneds,
      defaultFather:''
      // defaultActive:'DevHisManage'
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      this.defaultFather = key
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    gotoPath(item) {
      console.log(item.self.to);
      this.$router.push(item.self.to)
    },
  },
  computed:{
    // defaultActive(){
    //   if(this.$route.fullPath.indexOf('?')){
    //     let index = this.$route.fullPath.indexOf('?')
    //     console.log(this.$route.fullPath.slice(1,index-1),'defaultActive')
    //     return this.$route.fullPath.slice(1,index-1)
    //   }else{
    //     return this.$route.fullPath(1)
    //   }
    // }
  },
  watch:{
    $route:{
      immediate:true,
      handler(newval){
        if(newval.name == 'DevHisManage'){
          // this.$refs.menu.close(oldval.name)
          // debugger
          // console.log(this.$refs, this.$refs.menu)
          // this.$refs.menu.open(this.defaultActive)
          this.defaultFather = 'DevDataManage'
          this.$refs.menu.openMenu('DevDataManage')
          console.log('newval.name',newval.name)
        }
      }
    }
  },
  props: {
		isCollapse:Boolean,
    list: {
      type: Array,
      require: true,
    },
  },
  mounted(){
    // console.log(this.defaultActive)
    // debugger
    // this.$refs.menu.open(this.$route.name)
    this.$refs.menu.openMenu(this.defaultFather)
  }
};
</script>

<style scoped>
::-webkit-scrollbar{
  display: none;
}
.el-submenu .el-menu-item{
  margin-left: 30px;
  padding: 0;
}
.checked ,::v-deep .el-menu-item:focus, .el-menu-item:hover{
  background-color: rgb(11, 94, 94);
  color: aquamarine;
}
</style>